<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掘金</title>
    <link rel="icon" href="../img/juejinlogo.svg">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fontawesome/css/all.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/slide.css">
    <script src="https://unpkg.com//axios@0.27.2/dist/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/index-slide.js"></script>
    <script src="../js/header.js"></script>

</head>

<body>
    <!-- 稀土掘金首页 -->

    <!-- 最顶部导航栏 -->
    <div class="headerContainer">
        <header>
            <div class="leftPart">
                <!-- 稀土掘金的图标 -->
                <div class="logo">
                    <img src="../img/logo.svg" alt="">
                </div>

                <!-- 目录 -->
                <ul class="headerTitle">
                    <li>首页</li>
                    <li>沸点</li>
                    <li>课程</li>
                    <li>直播</li>
                    <li>活动</li>
                    <li>商城</li>
                    <li>APP</li>
                    <li>插件</li>
                </ul>
            </div>

            <div class="rightPart">
                <!-- 搜索框 -->
                <div class="searchContainer">
                    <!-- 搜索框 -->
                    <input id="searchBox" type="text" placeholder="探索稀土掘金">
                    <!-- 展示的下拉列表 -->
                    <ul class="listBox" id="listBox"></ul>
                    <!-- 查询图标 -->
                    <div class="searchIcon">
                        <div class="fas fa-search"></div>
                    </div>
                </div>

                <!-- 创作者中心 -->
                <div class="createCenter">
                    <p>创作者中心</p>
                    <div class="more"></div>
                </div>

                <!-- 会员 -->
                <div class="vip">
                    <img src="../img/vip.svg" alt="">
                    <p>会员</p>
                </div>

                <!-- 用户已登录 -->
                <div class="userIn">
                    <div class="fas fa-bell"></div>
                    <div class="userPhoto">
                        <img id="avatar" alt="">
                    </div>
                    <!-- 隐藏的功能菜单 -->
                    <div class="hiddenFun">
                        <ul class="funList">
                            <li class="goNotes">
                                <img src="../img/写文章.png" alt="">
                                <p>写文章</p>
                            </li>
                            <li>
                                <img src="../img/草稿箱.png" alt="">
                                <p>草稿箱</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="goUserMes">
                                <img src="../img/我的主页.png" alt="">
                                <p>我的主页</p>
                            </li>
                            <li>
                                <img src="../img/我赞过的.png" alt="">
                                <p>我赞过的</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的课程.png" alt="">
                                <p>我的课程</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的优惠劵.png" alt="">
                                <p>我的优惠劵</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/掘金会员.png" alt="">
                                <p>掘金会员</p>
                            </li>
                            <li>
                                <img src="../img/我的收藏.png" alt="">
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <img src="../img/成长福利.png" alt="">
                                <p>成长福利</p>
                            </li>
                            <li>
                                <img src="../img/标签管理.png" alt="">
                                <p>标签管理</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/浏览记录.png" alt="">
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <img src="../img/我的报名.png" alt="">
                                <p>我的报名</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li>
                                <img src="../img/设置.png" alt="">
                                <p>设置</p>
                            </li>
                            <li>
                                <img src="../img/关于.png" alt="">
                                <p>关于</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="exit">
                                <img src="../img/退出.png" alt="">
                                <p>退出</p>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 用户未登录 -->
                <button class="userOut">登录</button>

                <!-- 登录界面 -->
                <div class="loginBlock">
                    <!-- 遮罩层 -->
                    <div class="overlay">
                        <!-- 登录注册块 -->
                        <div class="loginBox">
                            <!-- 选择功能 -->
                            <div class="funSelect">
                                <div class="loginFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>登录</p>
                                </div>
                                <div class="registerFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>注册</p>
                                </div>
                            </div>

                            <!-- 关闭 -->
                            <div class="close">
                                <div class="fas fa-times"></div>
                            </div>

                            <!-- 不同输入状态时显示不同的图片 -->
                            <div class="inputState">
                                <img src="../img/openEye.svg" alt="">
                            </div>

                            <!-- 不同身份时选择登录或者注册的界面 -->
                            <ul class="interface">
                                <!-- 登录界面 -->
                                <li class="login">
                                    <form class="type" id="login" action="">
                                        <input class="userName" id="loginName" type="text" autocomplete="off"
                                            placeholder="请输入您的用户名">
                                        <input class="userPassword" id="loginPassword" type="password"
                                            autocomplete="off" placeholder="请输入您的密码">
                                        <input class="userBtn" id="loginBtn" type="button" autocomplete="off"
                                            value="登录">
                                        <div class="otherFunc">
                                            <p>没有账号？<span class="go">去注册</span></p>
                                            <div class="checkbox">
                                                <input type="checkbox" id="free" autocomplete="off">
                                                <p>记住我</p>
                                                <div class="fas fa-question-circle"></div>
                                                <span class="loginFree">七天免登录</span>
                                            </div>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 普通用户的注册界面 -->
                                <li class="register">
                                    <form class="type" id="register" action="">
                                        <input class="userName" id="registerName" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn" type="button" autocomplete="off"
                                            value="普通用户注册">
                                        <div class="otherFunc">
                                            <p>已有账号？<span class="go">去登录</span></p>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 管理员注册界面 -->
                                <li id="hidden">
                                    <form class="type" id="register0" action="">
                                        <input class="userName" id="registerName0" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword0" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn0" type="button" autocomplete="off"
                                            value="管理员注册">
                                    </form>
                                </li>
                            </ul>

                            <!-- 管理员注册的隐藏按钮 -->
                            <div class="hiddenDot"></div>

                            <!-- 消息提示 -->
                            <ul class="message">
                                <li>登录成功！稀土掘金欢迎您！</li>
                                <li>登录失败！请重新输入用户名和密码！</li>
                                <li>注册成功！请返回登录页登录！</li>
                                <li>注册失败！</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </header>
    </div>

    <!-- 第二个导航条 -->
    <div class="secHeaderContainer">
        <div class="secHeader">
            <!-- 左侧标签 -->
            <ul class="section">
                <li>综合</li>
                <li>关注</li>
                <li>后端</li>
                <li>前端</li>
                <li>Android</li>
                <li>iOS</li>
                <li>人工智能</li>
                <li>开发工具</li>
                <li>代码人生</li>
                <li>阅读</li>
            </ul>

            <!-- 标签管理 -->
            <div class="labelManage">
                <p>标签管理</p>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="slideShowArea">
        <!-- 往左的按钮 -->
        <div class="leftBtn"></div>
        <!-- 往右的按钮 -->
        <div class="rightBtn"></div>

        <ul class="slide">
            <!-- 通过js动态获取元素 -->
            <!-- 格式如下
            <li>
                <div class="title"></div>
                <div class="brief"></div>
                <img src="" alt="">
            </li> 
        -->
        </ul>
    </div>

    <!-- 中心内容 -->
    <section class="main">
        <!-- 左侧正文部分 -->
        <div class="leftSection">

            <!-- 推荐、最新、热榜 -->
            <ul class="recNewHot">
                <li>推荐</li>
                <li>最新</li>
                <li>热榜</li>
            </ul>

            <!-- 实时文章 -->
            <article>
                <ul id="indexPassageList">
                    <!-- 每篇文章一个li节点 -->
                    <li class="indexPassageListLi">
                        <!-- 顶部作者和文章分类 -->
                        <div class="topBar">
                            <div class="writerName"></div>
                            <div class="writerHiddenBox"></div>
                            <p>&nbsp; | &nbsp;</p>
                            <div class="formerTime">9月前</div>
                            <p>&nbsp; | &nbsp;</p>
                            <div class="category"></div>
                        </div>

                        <!-- 中间部分 -->
                        <div class="middleContainer">
                            <!-- 标题、简介和封面 -->
                            <div class="passageInner">
                                <div class="passageTitle"></div>
                                <div class="passageBrief"></div>
                                <ul class="passageAction">
                                    <li>
                                        <img class="icon" src="../img/icon-watch.png" alt="">
                                        <div class="watchCount"></div>
                                    </li>
                                    <li class="likeBtn">
                                        <img class="icon" id="likeImg" src="../img/icon-like.png" alt="">
                                        <div class="likeCount"></div>
                                    </li>
                                    <li>
                                        <img class="icon" src="../img/icon-comment.png" alt="">
                                        <div class="commentCount"></div>
                                    </li>
                                </ul>
                            </div>

                            <!-- 封面图片 -->
                            <div class="passageCover">
                                <img src="" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </article>
        </div>

        <!-- 右侧其他部分 -->
        <div class="rightSection">
            <!-- 签到 -->
            <div class="signIn">
                <div class="sayHi">
                    <img src="../img/date.png" alt="">
                    <p>上午好！</p>
                </div>

                <div class="signInButton">去签到</div>

                <p>点亮你在社区的每一天</p>
            </div>

            <!-- 广告1 -->
            <div class="adv1">
                <img src="../img/adv1.webp" alt="">
                <div class="fas fa-times"></div>
            </div>

            <!-- 广告2 -->
            <div class="adv2">
                <img src="../img/adv2.webp" alt="">
                <div class="fas fa-times"></div>
            </div>

            <!-- 下载APP -->
            <div class="downloadAPP">
                <img src="../img/qrcode.jpg" alt="">
                <div class="downloadText">
                    <p>下载稀土掘金APP</p>
                    <p>一个帮助开发者成长的社区</p>
                </div>
            </div>

            <!-- 作者榜 -->
            <div class="writerList">
                <header>🎖️作者榜</header>

                <div class="writer">
                    <div class="item">
                        <div class="avatar">
                            <img src="../img/writer1.png" alt="">
                        </div>

                        <div class="name">
                            <p>清秋</p>
                            <div class="level">
                                <img src="../img/lv5.png" alt="">
                            </div>
                        </div>

                        <div class="writerIntro">
                            <p>Web前端 @ 公众号：Frontend Radio</p>
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="../img/writer2.jpg" alt="">
                        </div>
                        <div class="name">
                            <p>阿里云云栖号</p>
                            <div class="level">
                                <img src="../img/lv3.png" alt="">
                            </div>
                        </div>

                        <div class="writerIntro">
                            <p>技术 @ 阿里云计算有限公司</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="avatar">
                            <img src="../img/writer3.jpg" alt="">
                        </div>
                        <div class="name">
                            <p>战场小包</p>
                            <div class="level">
                                <img src="../img/lv5.png" alt="">
                            </div>
                        </div>

                        <div class="writerIntro">
                            <p>公众号: 小包学前端</p>
                        </div>
                    </div>
                </div>

                <div class="fullList">
                    完整榜单
                </div>
            </div>

            <!-- 指南和推荐 -->
            <ul class="linkList">
                <li>
                    <img src="../img/link1.png" alt="">
                    <span>稀土掘金漫游指南</span>
                </li>
                <li>
                    <img src="../img/link2.png" alt="">
                    <span>安装掘金浏览器插件</span>
                </li>
                <li>
                    <img src="../img/link3.png" alt="">
                    <span>前往掘金翻译计划</span>
                </li>

            </ul>

            <!-- 页脚 -->
            <footer class="mainFooter">
                <ul>
                    <li class="hoverBlue">用户协议</li>
                    <li class="hoverBlue">营业执照</li>
                    <li class="hoverBlue">隐私政策</li>
                    <li class="hoverBlue">关于我们</li>
                </ul>
                <ul>
                    <li class="hoverBlue">站点地图</li>
                    <li class="hoverBlue">使用指南</li>
                    <li class="hoverBlue">友情链接</li>
                    <li class="hoverBlue">更多文章</li>
                </ul>
                <ul>
                    <p class="hoverBlue">京ICP备18012699号-3</p>
                </ul>
                <ul>
                    <img src="../img/police.png" alt="">
                    <p class="hoverBlue">京公网安备11010802026719号</p>
                </ul>
                <ul>
                    <li>版权所有：北京北比信息技术有限公司</li>
                    <li>公司地址：北京市海淀区信息路甲28号13层B座13B-5</li>
                    <li>公司座机：010-83434395</li>
                    <li>举报邮箱：<p class="hoverBlue">feedback@xitu.io</p>
                    </li>
                    <li class="hoverBlue">©2022 稀土掘金</li>
                </ul>
                <ul>
                    <img src="../img/weibo.png" alt="">
                    <img src="../img/Wechat.png" alt="">
                </ul>

            </footer>
        </div>

    </section>

    <!-- 桌面精灵 -->
    <div class="sprite">
        <img class="toTop" src="../img/openEye.svg" alt="">
        <img class="leftWing" src="../img/left.png" alt="">
        <img class="rightWing" src="../img/right.png" alt="">
    </div>


    <!-- 笔记 -->
    <div class="notes">
        <input type="text" placeholder="笔记标题">
        <textarea name="" id="" cols="30" rows="10" placeholder="笔记内容"></textarea>
        <div class="notesClose">x</div>
    </div>

    <!-- 建议 -->
    <div class="advice">
        <input type="text" placeholder="建议标题">
        <textarea name="" id="" cols="30" rows="10" placeholder="建议内容"></textarea>
        <div class="adviceClose">x</div>
    </div>





</body>

</html>